<template>
  <el-dialog 
    title="添加用户" 
    :visible.sync="dialogVisible" 
    width="50%" 
    @close="diologClose"
    :close-on-click-modal="false">

    <!-- form表单 -->
    <el-form
      :model="dialogData"
      :rules="rules"
      ref="dialogFormRef"
      label-width="100px">

      <!-- 用户名 -->
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="dialogData.userName"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="passWord">
        <el-input v-model="dialogData.passWord"></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dialogData.email"></el-input>
      </el-form-item>

      <!-- 手机 -->
      <el-form-item label="手机" prop="phone">
        <el-input v-model="dialogData.phone"></el-input>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormCheckFunc">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { postAddUserRole } from "@/network/homeRequest";

export default {
  data() {
    return {
      dialogVisible: false, // Dialog组件是否显示
      dialogData: {
        userName: '', // 用户名
        passWord: '', // 密码
        email: '', // 邮箱
        phone: '', // 手机
      },
      rules: { // 表单校验规则
        userName: [ // 用户名校验规则
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        passWord: [ // 密码规则
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        email: [ // 邮箱规则
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [ // 自定义电话规则
          { required: true, trigger: 'blur', validator: this.validPhone }
        ]
      }
    }
  },
  created() {
    this.$bus.$on('openDialog', () => { // 初始化打开Dialog组件事件
      // 点击按钮开启Dialog组件
      this.dialogVisible = true;
    })
  },
  destroyed() {
    this.$bus.$off('openDialog') // 注销事件
  },
  methods: {
    diologClose() { // Dialog组件关闭事件触发
      this.$refs['dialogFormRef'].resetFields(); // 移除表单所有内容即状态
    },
    async dialogFormCheckFunc() { // 提交表单预校验
      this.$refs.dialogFormRef.validate(val => {
        if (!val) { // 内容未填充完毕触发
          return this.$message({
            showClose: true,
            message: '请将所有内容填充完毕!',
            type: 'warning'
          });
        }
      })
        // 网络请求
        const { userName: username,
                passWord: password,
                email, 
                phone: mobile, 
              } = this.dialogData;
        const newDialogData = { username, password, email, mobile }
        const res = await postAddUserRole(newDialogData);
        if (res.meta.status !== 201) { // 异常
          console.log(res)
          return this.$message({
            showClose: true,
            message: res.meta.msg,
            type: 'error'
          });
        }
        this.$bus.$emit('getUserList'); // 获取最新数据
        this.dialogVisible = false; // 关闭Dialog组件
        return this.$message({ // 成功
            showClose: true,
            message: res.meta.msg,
            type: 'success'
        });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>